<template>
    <section class="module-list" v-loading="loading">
        <div  class="module-box" v-for="m in list" :key="m.id">
        <div class="module-content">
          <div class="module-name">
            {{m.name}}
          </div>
            <el-button type="text" @click="enterBtn(m)">进入</el-button>
        </div>
      </div>
    </section>
</template>

<script>
    import { createNamespacedHelpers } from 'vuex'
    const { mapState, mapActions } = createNamespacedHelpers(process.env.VUE_APP_MODULE_TITLE)
    export default {
        name: "teamModuleList",
        data(){
            return{
                loading:false,
                modeModule:[
                    {id:1,moduleList:[
                        {id:1,name:'账户管理'},
                        {id:2,name:'员工管理'},
                        {id:3,name:'商铺管理'},
                    ]}
                ],
                list:[]
            }
        },
        computed:{
            teamId(){
                return parseFloat(this.$route.params.id)
            },
        },
        watch:{

        },
        created(){
            console.log('看看teamId-----',this.teamId)
            
            this.$eventBus.emit('getModuleList')
            // this.getModuleList()
        },
        methods:{
            getModuleList(){
                this.list = this.modeModule.find(m=>m.id === this.teamId).moduleList

            },
        }
    }
</script>

<style scoped>
.module-list{
  display: flex;
  flex-direction: row;
  flex-wrap:wrap;
  border:0px solid red;
}
.module-box{
  border: 0px solid blue;
  margin: 10px;
  width: 280px;
}
.module-content{
  cursor: pointer;
  height:100px;
  background-color: #FFE4E1;
  color: #F08080;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center
}
</style>
